<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/animate.css" />
    <style>
        * {
            box-sizing: border-box;
        }
        
        img {
            display: inline-block;
            width: 100%;
        }
        
        .head {
            position: relative;
            height: 200px;
            width: 100%;
            overflow: hidden;
        }
        
        .topmenu {
            position: absolute;
            z-index: 9;
            top: 20px;
            left: 0;
            width: 100%;
            height: 80px;
        }
        
        .menuitem {
            display: inline-block;
            vertical-align: top;
            text-align: center;
        }
        
        .menuitem1 {
            width: 30%;
        }
        
        .menuitem2 {
            width: 15%;
            height: 80px;
            line-height: 80px;
            text-align: center;
        }
        
        .menuitem2 img {
            width: 85%;
            vertical-align: middle;
        }
        
        .menuitem11 {
            font-size: 2.4em;
            height: 55px;
            overflow: hidden;
            color: #fff;
        }
        
        .menuitem11 img {
            width: 10px;
        }
        
        .topimg {
            position: absolute;
            z-index: 7;
            top: 0;
            left: 0;
            width: 100%;
        }
        
        .topimg1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 140px;
        }
        
        .topimg1 img {
            height: 140px;
        }
        
        .topimg2 {
            position: absolute;
            z-index: 8;
            top: 45px;
            left: 0;
            height: 95px;
            width: 100%;
        }
        
        .topimg2 img {
            height: 100%;
        }
        
        .topimg3 {
            position: absolute;
            top: 140px;
            left: 0;
            width: 100%;
            height: 65px;
        }
        
        .topimg3 img {
            height: 65px;
        }
        
        .new-dog221 {
            display: inline-block;
            height: 8px;
            width: 80%;
            background-color: #fff;
            border-radius: 3px;
            padding: 1px;
            text-align: left;
        }
        
        .new-dog222 {
            border-radius: 3px;
            display: inline-block;
            height: 6px;
            background-color: #9FCCCF;
            vertical-align: top;
        }
        
        .hotdog {
            position: absolute;
            z-index: 10;
            background-color: #F35E4E;
            width: 120px;
            height: 50px;
            border-radius: 30px;
            top: 105px;
            right: 15px;
            color: #fff;
            font-size: 13px;
            text-align: center;
            padding: 5px 0;
            -webkit-animation-duration: 2s;
            animation-duration: 2s;
        }
        
        .hotdog .b {
            font-size: 18px;
        }
        
        .mg {
            position: relative;
            z-index: 12;
            top: -20px;
        }
        
        .mg1 {
            position: relative;
            height: 50px;
            z-index: 13;
        }
        
        .mg11 {
            position: absolute;
            left: 0;
            top: 0;
            width: 48%;
            height: 50px;
            border-top-right-radius: 40px;
            background: #fff;
        }
        
        .mg12 {
            position: absolute;
            width: 50px;
            height: 50px;
            right: 60px;
            top: 0;
            text-align: right;
        }
        
        .mg13 {
            position: absolute;
            width: 50px;
            height: 50px;
            right: 0;
            top: 0;
            text-align: right;
        }
        
        .mg12 img,
        .mg13 img {
            height: 50px;
            width: auto;
        }
        
        .mg14 {
            position: absolute;
            width: 50px;
            height: 50px;
            top: -10px;
            left: 10px;
        }
        
        .mg14 img {
            width: 100%;
        }
        
        .mg15 {
            position: absolute;
            top: 2px;
            left: 70px;
            color: #FF7500;
            font-weight: bold;
            font-size: 20px;
        }
        
        .mg16 {
            position: absolute;
            bottom: 0;
            left: 70px;
            font-weight: bold;
            color: #333;
            font-size: 15px;
        }
        
        @-webkit-keyframes pulse2 {
            0% {
                -webkit-transform: scaleX(1);
                transform: scaleX(1)
            }
            50% {
                -webkit-transform: scale3d(2, 2, 2);
                transform: scale3d(2, 2, 2)
            }
            to {
                -webkit-transform: scaleX(1);
                transform: scaleX(1)
            }
        }
        
        @keyframes pulse2 {
            0% {
                -webkit-transform: scaleX(1);
                transform: scaleX(1)
            }
            50% {
                -webkit-transform: scale3d(2, 2, 2);
                transform: scale3d(2, 2, 2)
            }
            to {
                -webkit-transform: scaleX(1);
                transform: scaleX(1)
            }
        }
        
        .pulse2 {
            -webkit-animation-name: pulse2;
            animation-name: pulse2;
            -webkit-animation-duration: 500ms;
            animation-duration: 500ms;
        }
        
        .pulse3 {
            -webkit-animation-name: pulse2;
            animation-name: pulse2;
            -webkit-animation-duration: 500ms;
            animation-duration: 500ms;
        }
        
        .mg2 {
            text-align: center;
            padding-top: 10px;
        }
        
        .mgi {
            background: #EFEFF2;
            display: inline-block;
            width: 22%;
            height: 80px;
            line-height: 80px;
            text-align: center;
            border-radius: 7px;
        }
        
        .mgdog {
            height: 80px;
            width: auto;
        }
        
        .ft {
            width: 96%;
            height: 50px;
            border-radius: 10px;
            margin: 0 auto;
            background: #F8F8F8;
            position: relative;
            top: 0px;
            text-align: center;
        }
        
        .ft>div {
            vertical-align: top;
        }
        
        .ft1,
        .ft3 {
            display: inline-block;
            width: 28%;
            font-size: 18px;
            font-weight: bold;
            color: #333;
            line-height: 50px;
        }
        
        .ft1 img,
        .ft3 img {
            width: 22px;
            margin-right: 5px;
            vertical-align: middle;
            position: relative;
            top: -2px;
        }
        
        .ft2 {
            display: inline-block;
            width: 40%;
            background-color: #71DC71;
            height: 50px;
            line-height: 70px;
            border-radius: 25px;
            text-align: center;
            position: relative;
            color: #fff;
            font-size: 18px;
        }
        
        .ft21 {
            width: 20px;
            vertical-align: middle;
            position: relative;
            top: -2px;
        }
        
        .ft20 {
            position: absolute;
            width: 80px;
            height: 80px;
            top: -45px;
            left: calc(50% - 40px);
        }
        
        .ft20 img {
            width: 80px;
            height: 80px;
        }
        
        .ft202 {
            position: absolute;
            width: 25px;
            height: 16px;
            border-radius: 8px;
            background: #fff;
            bottom: 12px;
            right: 12px;
            text-align: center;
            line-height: 16px;
            font-size: 12px;
            color: #666;
        }
        
        .checkd {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .mgspan {
            position: absolute;
            right: 0;
            bottom: 0;
            border-radius: 7px;
            background: #72DD72;
            width: 24px;
            height: 20px;
            text-align: center;
            color: #fff;
            line-height: 20px;
            font-size: 16px;
        }
        
        .checkdM {
            position: fixed;
            width: 80px;
            height: 80px;
            z-index: 999;
        }
        
        .mask {
            position: fixed;
            background: rgba(255, 0, 0, 0);
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 888;
            display: none;
        }
        
        .topimg>div {
            white-space: nowrap;
            font-size: 0;
        }
        
        .topimg4 {
            position: absolute;
            top: 120px;
            left: 50px;
            width: 100px;
            height: 100px;
            z-index: 12;
        }
        
        .upgold {
            position: absolute;
            top: 30%;
            width: 100%;
            left: 0;
            text-align: center;
            height: 40px;
            line-height: 40px;
            color: #FF9100;
            font-size: 15px;
            font-weight: bold;
            z-index: 14;
            display: none;
        }
        
        .upgold img {
            width: 20px;
            height: 20px;
            vertical-align: middle;
            position: relative;
            top: -2px;
        }
    </style>
</head>

<body>
    <div class="mask"></div>
    <div class="">
        <div class="head">
            <div class="topmenu">
                <div class="menuitem menuitem1">
                    <div class="menuitem11 map">
                        美国
                        <img src="../image/app/dog/ic_arrow_right_white_bold.png" alt="">
                    </div>
                    <div class="menuitem12">
                        <div class="new-dog221">
                            <span class="new-dog222" style="width:20.28%;"></span>
                        </div>
                    </div>
                </div>
                <div class="menuitem menuitem2 getgold"><img src="../image/app/dog/ic_coin_clock.png" alt=""></div>
                <div class="menuitem menuitem2 zhuanpan"><img src="../image/app/dog/ic_luck_draw.png" alt=""></div>
                <div class="menuitem menuitem2 paihang"><img src="../image/app/dog/ic_ranking.png" alt=""></div>
                <div class="menuitem menuitem2 play"><img src="../image/app/dog/ic_how_play.png" alt=""></div>
            </div>
            <div class="topimg">
                <div class="topimg1">
                    <img src="../image/app/dog/bg_new_york_far.png" alt="">
                    <img src="../image/app/dog/bg_new_york_far.png" alt="">
                    <img src="../image/app/dog/bg_new_york_far.png" alt="">
                </div>
                <div class="topimg2">
                    <img src="../image/app/dog/bg_new_york_middle.png" alt="">
                    <img src="../image/app/dog/bg_new_york_middle.png" alt="">
                    <img src="../image/app/dog/bg_new_york_middle.png" alt="">
                </div>
                <div class="topimg3">
                    <img src="../image/app/dog/bg_new_york_near.png" alt="">
                    <img src="../image/app/dog/bg_new_york_near.png" alt="">
                    <img src="../image/app/dog/bg_new_york_near.png" alt="">
                </div>
                <div class="topimg4">
                    <img src="../image/car.gif" alt="">
                </div>
            </div>
            <div class="hotdog animated pulse infinite fhdog">
                <div>分红犬今日收益</div>
                <div class="b">￥1160.00</div>
            </div>
        </div>
        <div class="mg">
            <div class="mg1">
                <div class="mg11"></div>
                <div class="mg12 getdog"><img src="../image/app/dog/ic_dog_shop.png" alt=""></div>
                <div class="mg13"><img src="../image/app/dog/ic_garbage_can.png" alt=""></div>
                <div class="mg14"><img src="../image/app/dog/ic_coin_big.png" alt=""></div>
                <div class="mg15 animated">464514K</div>
                <div class="mg16">252513/秒</div>
            </div>
            <div class="mg2">
                <div class="mgi">
                    <div class="checkd" data-level="2">
                        <img class="mgdog animated" src="../image/app/dog/ic_dog_level2.png" alt="">
                        <span class="mgspan">2</span>
                        <div class="upgold animated"><img src="../image/app/dog/ic_dog_shop_coin.png" alt="">+<span class="goldnum">2000</span></div>
                    </div>
                </div>
                <div class="mgi">
                    <div class="checkd" data-level="2">
                        <img class="mgdog animated" src="../image/app/dog/ic_dog_level2.png" alt="">
                        <span class="mgspan">2</span>
                        <div class="upgold animated"><img src="../image/app/dog/ic_dog_shop_coin.png" alt="">+<span class="goldnum">2000</span></div>
                    </div>
                </div>
                <div class="mgi">
                    <div class="checkd" data-level="3">
                        <img class="mgdog animated" src="../image/app/dog/ic_dog_level3.png" alt="">
                        <span class="mgspan">3</span>
                        <div class="upgold animated"><img src="../image/app/dog/ic_dog_shop_coin.png" alt="">+<span class="goldnum">3000</span></div>
                    </div>
                </div>
                <div class="mgi">
                    <div class="checkd" data-level="4">
                        <img class="mgdog animated" src="../image/app/dog/ic_dog_level4.png" alt="">
                        <span class="mgspan">4</span>
                        <div class="upgold animated"><img src="../image/app/dog/ic_dog_shop_coin.png" alt="">+<span class="goldnum">4000</span></div>
                    </div>
                </div>
                <div class="mgi">
                    <div class="checkd" data-level="0"></div>
                </div>
                <div class="mgi">
                    <div class="checkd" data-level="0"></div>
                </div>
                <div class="mgi">
                    <div class="checkd" data-level="0"></div>
                </div>
                <div class="mgi">
                    <div class="checkd" data-level="0"></div>
                </div>
                <div class="mgi">
                    <div class="checkd" data-level="0"></div>
                </div>
                <div class="mgi">
                    <div class="checkd" data-level="0"></div>
                </div>
                <div class="mgi">
                    <div class="checkd" data-level="0"></div>
                </div>
                <div class="mgi">
                    <div class="checkd" data-level="0"></div>
                </div>
            </div>
        </div>
        <div class="ft">
            <div class="ft1"><img src="../image/app/dog/ic_field_guide.png" alt="">图鉴</div>
            <div class="ft2 animated" data-level="8">
                <div class="ft20">
                    <img src="../image/app/dog/ic_dog_level8.png" alt="">
                    <span class="ft202">8</span>
                </div>
                <img class="ft21" src="../image/app/dog/ic_gold_coin.png" alt=""> 4321341
            </div>
            <div class="ft3"><img src="../image/app/dog/ic_shop.png" alt="">仓库</div>
        </div>

    </div>
</body>

</html>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    var mxwidth = $(document).width();
    var mxheight = $(document).height();
    var mxheadheight = mxheight - 370;
    console.log(mxheadheight);
    //自适应高度
    $(".head").css("height", mxheadheight + 'px');
    $(".topimg1").find("img").css("height", (mxheadheight - 60) + 'px');
    $(".topimg1").css("height", (mxheadheight - 60) + 'px');
    $(".topimg2").css("top", (mxheadheight - 155) + 'px');
    $(".topimg3").css("top", (mxheadheight - 60) + 'px');
    $(".topimg4").css("top", (mxheadheight - 80) + 'px');
    var speed1 = -0.2,
        speed2 = -0.5,
        speed3 = -2; //初始化速度
    function move(cla, speed) {
        var le = Number($(cla).css("left").replace('px', ''));
        if (Math.abs(le) >= mxwidth) { //向左滚动，当靠左的图4移出边框时
            $(cla).css("left", "0px");
        } else {
            var newl = le + speed + "px";
            $(cla).css("left", newl);
        }
    }
    var timer1 = setInterval(move, 30, ".topimg1", speed1); //全局变量 ，保存返回的定时器
    var timer2 = setInterval(move, 30, ".topimg2", speed2); //全局变量 ，保存返回的定时器
    var timer3 = setInterval(move, 30, ".topimg3", speed3); //全局变量 ，保存返回的定时器
    // $(".topimg1").css("left","-50px");
    var mxitemwidth = Math.floor(mxwidth * 0.22 - 2);
    var mxleft = (mxwidth - mxwidth * 0.22 * 4 - 18) / 2 + 25;
    var mxa1 = mxleft;
    var mxa2 = mxa1 + mxitemwidth;
    var mxb1 = mxa2 + 8;
    var mxb2 = mxb1 + mxitemwidth;
    var mxc1 = mxb2 + 8;
    var mxc2 = mxc1 + mxitemwidth;
    var mxd1 = mxc2 + 8;
    var mxd2 = mxd1 + mxitemwidth;
    var mxh1 = mxheadheight + 60;
    var mxh2 = mxh1 + 86;
    var mxh3 = mxh2 + 86;
    var mxh4 = mxh3 + 86;
    // console.log(mxa1,mxa2);
    // console.log(mxb1,mxb2);
    // console.log(mxc1,mxc2);
    // console.log(mxd1,mxd2);
    // console.log(mxwidth);
    // console.log($(".mg2 .mgi:eq(1)").html());
    /*******************总金币放大缩小***********************/
    // function biggold(){
    //     $(".mg15").addClass("animated");
    //     $(".mg15").addClass("pulse2");
    //     setTimeout(function(){
    //         $(".mg15").removeClass("pulse2");
    //     },1000)
    // }
    /**12个共九宫生产金币*/
    //初始化所有格子定时器
    // var geziindex = [];

    //初始化12个定时器对象
    var gezi = {
        gezi0: null,
        gezi1: null,
        gezi2: null,
        gezi3: null,
        gezi5: null,
        gezi6: null,
        gezi6: null,
        gezi7: null,
        gezi8: null,
        gezi9: null,
        gezi10: null,
        gezi11: null
    }
    var gezispeed = 4000;

    function upgold(idx) {
        var cls = $(".mg2 .mgi").eq(idx).find(".upgold");
        $(cls).show();
        $(cls).addClass("fadeOutUp");
        var totalgold = Number($(".mg15").text().replace("K", ""));
        totalgold += 200;
        $(".mg15").html(totalgold + "K");
        $(".mg15").addClass("pulse2");
        setTimeout(function() {
            $(cls).removeClass("fadeOutUp");
            $(".mg15").removeClass("pulse2");
            $(cls).hide();
        }, 1000)
    }

    function resetGezi() {
        var geziindex1 = [0, 1, 3, 4, 5, 11];
        var geziindex2 = [2, 6, 7, 8, 9, 10, 12];
        for (var i = 0; i < geziindex1.length; i++) {
            gezi['gezi' + geziindex1[i]] = setInterval(upgold, gezispeed, geziindex1[i]);
        }
        setTimeout(function() {
            for (var i = 0; i < geziindex2.length; i++) {
                gezi['gezi' + geziindex2[i]] = setInterval(upgold, gezispeed, geziindex2[i]);
            }
        }, 2000)
    }
    //初始化所有定时器
    resetGezi();
    setInterval(function() {
            $(".ft2").addClass("swing");
            setTimeout(function() {
                $(".ft2").removeClass("swing");
            }, 1000)
        }, 4000)
        /****移动狗狗***/
    $(".mg2").on("touchstart", ".checkd", function(e) {
        e.preventDefault();
        // console.log("点击开始");
        // console.log("移动X坐标：",e.originalEvent.changedTouches[0].pageX);
        // console.log("移动Y坐标：",e.originalEvent.changedTouches[0].pageY);
        var startX = e.originalEvent.changedTouches[0].pageX - 70;
        var startY = e.originalEvent.changedTouches[0].pageY - 70;
        $(this).addClass("checkdM");
        $(this).find(".mgdog").removeClass("pulse3");
        $(this).css("top", startY + "px");
        $(this).css("left", startX + "px");
    });
    $(".mg2").on("touchmove", ".checkd", function(e) {
        e.preventDefault();
        var startX = e.originalEvent.changedTouches[0].pageX;
        var startY = e.originalEvent.changedTouches[0].pageY;
        var moveX = startX - 70;
        var moveY = startY - 70;
        $(this).css("top", moveY + "px");
        $(this).css("left", moveX + "px");
    });
    $(".mg2").on("touchend", ".checkd", function(e) {
        e.preventDefault();
        // console.log("点击结束");
        $(this).removeClass("checkdM");
        $(this).css("top", "0");
        $(this).css("left", "0");
        var html = $(this).html(); //当前节点元素
        var oldindex = $(this).parent().index(); //当前所在下标
        var startX = e.originalEvent.changedTouches[0].pageX;
        var startY = e.originalEvent.changedTouches[0].pageY;
        // console.log(startX);
        // console.log(startY);
        if (startY > mxh1 && startY < mxh2) {
            if (startX < mxa2) {
                addhtml(html, oldindex, 0);
            } else if (startX > mxb1 && startX < mxb2) {
                addhtml(html, oldindex, 1);
            } else if (startX > mxc1 && startX < mxc2) {
                addhtml(html, oldindex, 2);
            } else if (startX > mxd1) {
                addhtml(html, oldindex, 3);
            }
        } else if (startY > mxh2 && startY < mxh3) {
            if (startX < mxa2) {
                addhtml(html, oldindex, 4);
            } else if (startX > mxb1 && startX < mxb2) {
                addhtml(html, oldindex, 5);
            } else if (startX > mxc1 && startX < mxc2) {
                addhtml(html, oldindex, 6);
            } else if (startX > mxd1) {
                addhtml(html, oldindex, 7);
            }
        } else if (startY > mxh3 && startY < mxh4) {
            if (startX < mxa2) {
                addhtml(html, oldindex, 8);
            } else if (startX > mxb1 && startX < mxb2) {
                addhtml(html, oldindex, 9);
            } else if (startX > mxc1 && startX < mxc2) {
                addhtml(html, oldindex, 10);
            } else if (startX > mxd1) {
                addhtml(html, oldindex, 11);
            }
        }
    });
    //处理交换元素
    function addhtml(html, oindex, nindex) {
        var oclassname = $(".mg2 .mgi").eq(oindex);
        var nclassname = $(".mg2 .mgi").eq(nindex);
        var olevel = $(oclassname).find(".checkd").attr("data-level");
        var nlevel = $(nclassname).find(".checkd").attr("data-level");
        console.log(olevel, nlevel);
        // $(oclassname).find(".mgdog").removeClass("pulse3");
        // $(nclassname).find(".mgdog").removeClass("pulse3");
        //如果新的里面有元素，则处理
        if (oindex === nindex) {
            // console.log(oindex,nindex);
            return;
        } else if ($(nclassname).find(".checkd").html() != "") {
            //如果等级不同则互换
            if (olevel == nlevel) {
                //添加新的元素
                olevel++;
                var src = "../image/app/dog/ic_dog_level" + olevel + ".png";
                $(nclassname).find(".checkd").html(html);
                $(nclassname).find(".checkd").attr("data-level", olevel);
                $(nclassname).find(".mgdog").attr("src", src);
                $(nclassname).find(".mgspan").html(olevel);
                $(nclassname).find(".goldnum").html(olevel * 1000);
                //删除旧的元素
                $(oclassname).find(".checkd").html("");
                $(oclassname).find(".checkd").attr("data-level", 0);
                $(nclassname).find(".mgdog").addClass("pulse3");
            } else {
                var ohtml = $(nclassname).find(".checkd").html();
                //添加新的元素
                $(nclassname).find(".checkd").html(html);
                $(nclassname).find(".checkd").attr("data-level", olevel);
                //删除旧的元素
                $(oclassname).find(".checkd").html(ohtml);
                $(oclassname).find(".checkd").attr("data-level", nlevel);
            }
        } else if (oindex != nindex) {
            //添加新的元素
            $(nclassname).find(".checkd").html(html);
            $(nclassname).find(".checkd").attr("data-level", olevel);
            //删除旧的元素
            $(oclassname).find(".checkd").html("");
            $(oclassname).find(".checkd").attr("data-level", 0);
        }
    }
    /***********添加狗狗**********/
    $(".ft2").click(function() {
            var level = $(this).attr("data-level");
            $(".mgi").each(function(i, item) {
                if ($(this).find(".checkd").attr("data-level") == "0") {
                    var nclassname = $(".mg2 .mgi").eq(i);
                    var src = "../image/app/dog/ic_dog_level" + level + ".png";
                    var html = '<div class="checkd" data-level="' + level + '"><img class="mgdog animated" src="../image/app/dog/ic_dog_level' + level + '.png" alt=""><span class="mgspan">' + level + '</span>' +
                        '<div class="upgold animated"><img src="../image/app/dog/ic_dog_shop_coin.png" alt="">+<span class="goldnum">' + (level * 1000) + '</span></div></div>';
                    $(nclassname).html(html);
                    return false;
                }
            })
        })
        /**图鉴***/
    $(".ft1").click(function() {
            $api.setStorage('frameName', 'tujian');
            api.openFrame({
                name: 'tujian',
                url: '../html/tujian.html',
                rect: {
                    x: 0,
                    y: 0,
                    w: 'auto',
                    h: 'auto'
                },
                pageParam: {
                    name: 'tujian',
                }
            });
        })
        /**仓库***/
    $(".ft3").click(function() {
            $api.setStorage('frameName', 'cangku');
            api.openFrame({
                name: 'cangku',
                url: '../html/cangku.html',
                rect: {
                    marginLeft: 0, //相对父页面左外边距的距离，数字类型
                    marginTop: 0, //相对父页面上外边距的距离，数字类型
                    marginBottom: 0, //相对父页面下外边距的距离，数字类型
                    marginRight: 0 //相对父页面右外边距的距离，数字类型
                },
                pageParam: {
                    name: 'cangku',
                }
            });
        })
        /**排行榜***/
    $(".paihang").click(function() {
            $api.setStorage('frameName', 'paihang');
            api.openFrame({
                name: 'paihang',
                url: '../html/paihang.html',
                rect: {
                    x: 0,
                    y: 0,
                    w: 'auto',
                    h: 'auto'
                },
                pageParam: {
                    name: 'paihang',
                }
            });
        })
        /**玩法***/
    $(".play").click(function() {
            $api.setStorage('frameName', 'play');
            api.openFrame({
                name: 'play',
                url: '../html/play.html',
                rect: {
                    x: 0,
                    y: 0,
                    w: 'auto',
                    h: 'auto'
                },
                pageParam: {
                    name: 'play',
                }
            });
        })
        /**分红犬***/
    $(".fhdog").click(function() {
            $api.setStorage('frameName', 'fhdog');
            api.openFrame({
                name: 'fhdog',
                url: '../html/fhdog.html',
                rect: {
                    x: 0,
                    y: 0,
                    w: 'auto',
                    h: 'auto'
                },
                pageParam: {
                    name: 'fhdog',
                }
            });
        })
        /**地图***/
    $(".map").click(function() {
            $api.setStorage('frameName', 'map');
            api.openFrame({
                name: 'map',
                url: '../html/map.html',
                rect: {
                    x: 0,
                    y: 0,
                    w: 'auto',
                    h: 'auto'
                },
                pageParam: {
                    name: 'map',
                }
            });
        })
        /**限时金币***/
    $(".getgold").click(function() {
            $api.setStorage('frameName', 'getgold');
            api.openFrame({
                name: 'getgold',
                url: '../html/getgold.html',
                rect: {
                    x: 0,
                    y: 0,
                    w: 'auto',
                    h: 'auto'
                },
                pageParam: {
                    name: 'getgold',
                }
            });
        })
        /**幸运转盘***/
    $(".zhuanpan").click(function() {
            $api.setStorage('frameName', 'zhuanpan');
            api.openFrame({
                name: 'zhuanpan',
                url: '../html/zhuanpan.html',
                rect: {
                    x: 0,
                    y: 0,
                    w: 'auto',
                    h: 'auto'
                },
                pageParam: {
                    name: 'zhuanpan',
                }
            });
        })
        /**添加狗子***/
    $(".getdog").click(function() {
        $api.setStorage('frameName', 'getdog');
        api.openFrame({
            name: 'getdog',
            url: '../html/getdog.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            pageParam: {
                name: 'getdog',
            }
        });
    })

    apiready = function() {
        api.addEventListener({
            name: 'details'
        }, function(ret, err) {
            var headImg = ret.value.key;
            // alert(headImg+"关闭了")
        });
    }
</script>